<template>
  <div>
    <el-row :gutter="10" style="margin-bottom:100px">
      <el-col :span="6">
        <el-card>
          <div style="color:#409EFF"><i class="el-icon-s-custom"></i>用户总数</div>
          <div style="padding:10px 0;text-align: center;font-weight: bold">
            {{ userTotal }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div style="color:#409EFF"><i class="el-icon-s-goods"></i>进价总额</div>
          <div style="padding:10px 0;text-align: center;font-weight: bold;color:red">
            ￥ {{ goodsTotalBid }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div style="color:#409EFF"><i class="el-icon-s-shop"></i>销售总额</div>
          <div style="padding:10px 0;text-align: center;font-weight: bold;color:green">
            ￥ {{ orderTotalPric }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div style="color:#409EFF"><i class="el-icon-s-claim"></i>订单总数</div>
          <div style="padding:10px 0;text-align: center;font-weight: bold">
            {{ orderTotal }}
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <!-- 折线图 -->
      <el-col :span="12">
        <div id="main3">

</div>
      </el-col>
      <!-- 饼图 -->
      <el-col :span="12">
        <div id="main2">
      
        </div>
      </el-col>
    </el-row>

    
    
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name:'datas',
  data(){
    return{
      // 用户总数
      userTotal:0,
      // 进价总额
      goodsTotalBid:0,
      // 收益总额
      orderTotalPric:0,
      // 订单总数
      orderTotal:0,
      goodsList:[],
      soldData:[]
      
    }
  },
  methods:{
    //#region (用户数量、订单量、销售额展示)
    // 获取用户总数
    getUserTotal(){
      this.request.get('/user').then(res=>{
        this.userTotal=res.data.length
        // console.log(res);
      })
    },
    // 获取定价总额
    getGoodsTotalBid(){
      this.request.get('/goods').then(res=>{
        res.data.forEach(item=>{
          this.goodsTotalBid+=item.goodsBid*(item.goodsSold+item.goodsStock)
        })
      })
    },
    // 获取订单总数
    getOrderTotal(){
      this.request.get('/order').then(res=>{
        this.orderTotal=res.data.length
        this.orderTotalPric = res.data.reduce((acc, item) => acc + item.orderPrice, 0);
        // res.data.forEach(item => {
        //   this.orderTotalPric=this.orderTotalPric+item.orderPrice
        // });

      })
    },
    //#endregion

    fun1(){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option = {
        title:{
          text:'各个季度销售额',
          subtext:'趋势图',
          left:'center'
        },
        tooltip:{
          trigger:'item'
        },
        logend:{
          orient:'vertical',
          left:'left'
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line'
          }
        ]
      };
      this.request.get("/echarts/fun1").then(res=>{
        option.xAxis.data=res.data.xAxis
        option.series[0].data=res.data.y
        myChart.setOption(option);
      })
    
    },
    fun2(){
      var chartDom2 = document.getElementById('main2');
      var myChart2 = echarts.init(chartDom2);
      var option2 = {
        title: {
          text: '各个手机厂商双十一销售额(单位:万)',
          subtext: '后台数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '销量',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '苹果' },
              { value: 735, name: '小米' },
              { value: 580, name: '华为' },
              { value: 484, name: 'vivo' },
              { value: 300, name: 'oppo' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart2.setOption(option2);
    },
    async load(){
      let res=await this.request.get('/goods')
      let live=0
      let liveMoney=0
      let food=0
      let foodMoney=0
      let dress=0
      let dressMoney=0
      let culture=0
      let cultureMoney=0
      let digit=0
      let digitMoney=0
      let household=0
      let householdMoney=0
      this.goodsList=res.data
      console.log(res);
      this.goodsList.forEach(item => {
        if(item.goodsType=='居家'){
          live+=item.goodsSold
          liveMoney+=item.goodsSold*(item.goodsPrice-item.goodsBid)
        }
        if(item.goodsType=='食品'){
          food+=item.goodsSold
          foodMoney+=item.goodsSold*(item.goodsPrice-item.goodsBid)
        }
        if(item.goodsType=='服饰'){
          dress+=item.goodsSold
          dressMoney+=item.goodsSold*(item.goodsPrice-item.goodsBid)
        }
        if(item.goodsType=='文化'){
          culture+=item.goodsSold
          cultureMoney+=item.goodsSold*(item.goodsPrice-item.goodsBid)
        }
        if(item.goodsType=='数码'){
          digit+=item.goodsSold
          digitMoney+=item.goodsSold*(item.goodsPrice-item.goodsBid)
        }
        if(item.goodsType=='家电'){
          household+=item.goodsSold
          householdMoney+=item.goodsSold*(item.goodsPrice-item.goodsBid)
        }
      });
      
      this.soldData.push(['居家',live,liveMoney])
      this.soldData.push(['食品',food,foodMoney])
      this.soldData.push(['服饰',dress,dressMoney])
      this.soldData.push(['文化',culture,cultureMoney])
      this.soldData.push(['数码',digit,digitMoney])
      this.soldData.push(['家电',household,householdMoney])
      console.log(this.soldData);
     
    },
    async fun3(){
      await this.load()
      var chartDom3 = document.getElementById('main3');
      var myChart3 = echarts.init(chartDom3);
      var option3;

      option3 = {
        title: {
          text: '销量/销售额统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data:[]
          // data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data:[]
            // data: [18203, 23489, 29034, 104970, 131744, 630230]
          },
          {
            name: '销售额',
            type: 'bar',
            data:[]
            // data: [19325, 23438, 31000, 121594, 134141, 681807]
          }
        ]
      };
      this.soldData.forEach(item=>{
        option3.yAxis.data.push(item[0])
        option3.series[0].data.push(item[1]*10)
        option3.series[1].data.push(item[2])
      })
      option3 && myChart3.setOption(option3);

    }
    
  },
  mounted(){
    // this.fun1()
    this.fun2()
    this.fun3()
    this.getUserTotal()
    this.getGoodsTotalBid()
    this.getOrderTotal()
  }

}
</script>

<style scoped>
/* #main{
  width: 500px;
  height: 400px;
} */
#main2{
  width: 500px;
  height: 400px;
}
#main3{
  width: 600px;
  height: 400px;
  /* background-color: pink; */
}
</style>